<style>
    .apl {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff; /* 设置背景颜色，如果需要的话 */
        /* 其他样式属性，例如 padding、border 等 */
    }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<div id="rank" class="ranking">
    <div class="rank-body">
        <div class="rank-left">
            <h3>云音乐特色榜</h3>
            <ul>
                <li @click="changeClass(1)" :class="cClass == 1?'first_li_bg':''">
                    <img src="rank-imgs/rl01.jpg" alt="">
                    <p>每天更新</p>
                    <p>飙升榜</p>
                </li>
                <li @click="changeClass(2)" :class="cClass == 2?'first_li_bg':''">
                    <img src="rank-imgs/rl2.png" alt="">
                    <p>每天更新</p>
                    <p>新歌榜</p>
                </li>
                <li @click="changeClass(3)" :class="cClass == 3?'first_li_bg':''">
                    <img src="rank-imgs/rl3.png" alt="">
                    <p>每周四更新</p>
                    <p>原创榜</p>
                </li>
                <li @click="changeClass(4)" :class="cClass == 4?'first_li_bg':''">
                    <img src="rank-imgs/rl4.png" alt="">
                    <p>每天更新</p>
                    <p>热歌榜</p>
                </li>
            </ul>
            <h3>全球媒体榜</h3>
            <ul>
                <li>
                    <img src="rank-imgs/rl01.jpg" alt="">
                    <p>每周四更新</p>
                    <p>黑胶VIP爱听榜</p>
                </li>
                <li>
                    <img src="rank-imgs/rl02.png" alt="">
                    <p>每周五更新</p>
                    <p>云音乐说唱榜</p>
                </li>
                <li>
                    <img src="rank-imgs/rl03.png" alt="">
                    <p>每周四更新</p>
                    <p>云音乐古典榜</p>
                </li>
                <li>
                    <img src="rank-imgs/rl04.jpg" alt="">
                    <p>每周五更新</p>
                    <p>云音乐电音榜</p>
                </li>
                <li>
                    <img src="rank-imgs/rl05.png" alt="">
                    <p>每周四更新</p>
                    <p>云音乐ACG榜</p>
                </li>

                <li>
                    <img src="rank-imgs/rl06.png" alt="">
                    <p>每周四更新</p>
                    <p>云音乐韩语榜</p>
                </li>
                <li>
                    <img src="rank-imgs/rl07.jpg" alt="">
                    <p>每周五更新</p>
                    <p>云音乐国电榜</p>
                </li>
                <li>
                    <img src="rank-imgs/rl08.png" alt="">
                    <p>每周一更新</p>
                    <p>UK排行榜周榜</p>
                </li>
                <li>
                    <img src="rank-imgs/rl09.jpg" alt="">
                    <p>每周三更新</p>
                    <p>美国Billboard榜</p>
                </li>
                <li>
                    <img src="rank-imgs/rl10.jpg" alt="">
                    <p>每周三更新</p>
                    <p>Beatport全球电子舞曲榜</p>
                </li>

            </ul>
        </div>

        <div class="rank-right">

            <div class="rr-top">
                <div>
                    <div class="rtl">
                        <img src="upload/18696095720518497.png" alt="">
                        <span></span>
                    </div>

                    <div class="rtr">
                        <div>
                            <h2>{{n}}</h2>
                        </div>
                        <div>
                            <i></i>
                            <span>最近更新：01月05日</span>
                            <span>（刚刚更新）</span>
                        </div>

                        <div class="rtr3">
                            <a href="javascript:void(0);">
                                <i>播放<em></em></i>
                            </a>
                            <a href="javascript:void(0);"></a>
                            <a href="javascript:void(0);"><i>(3881647)</i></a>
                            <a href="javascript:void(0);"><i>(11585)</i></a>
                            <a href="javascript:void(0);"><i>下载</i></a>
                            <a href="javascript:void(0);"><i>(210058)</i></a>
                        </div>
                    </div>

                </div>
            </div>

            <div class="rr-body">
                <div class="rrb-top">
                    <h3>歌曲列表</h3>
                    <span>99首歌</span>
                    <span>播放：<i>4747925504</i>次</span>
                </div>

                <table>
                    <thead>
                        <tr>
                            <th></th>
                            <th>
                                <div>标题</div>
                            </th>
                            <th>
                                <div>时长</div>
                            </th>
                            <th>
                                <div>歌手</div>
                            </th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr v-for="(song,index) in pageInfo.list" :class="index<3?'top3':''">
                            <td>
                                <i>{{index+1}}</i>
                            </td>

                            <td>
                                <a href="javascrit:void(0);">
                                    <img v-if="index<3 && song.pic" :src="'/music_platform'+song.pic" alt="">
                                    <img v-else-if="index < 3" src="rank-imgs/td1.png" alt="">
                                </a>
                                <a href="javascrit:void(0);"></a>
                                <a :href="'/music_platform/pages/song_detail.html?mid='+song.mid">{{song.mname}}</a>
                                <a href="javascrit:void(0);"></a>
                            </td>

                            <td>
                                <span>03:54</span>
                                <div>
                                    <a href="javascrtpt:void(0);"></a>
                                    <a href="javascrtpt:void(0);"></a>
                                    <a href="javascrtpt:void(0);"></a>
                                    <a href="javascrtpt:void(0);"></a>
                                </div>
                            </td>

                            <td>
                                <a :href="'/music_platform/pages/singer_detail.html?sid='+song.singer.sid">{{song.singer.sname}}</a>
                            </td>

                            <td>
                                <i @click="playSong(song.mid)" class="fa fa-play-circle"></i> <!-- 这是播放按钮图标 -->
                            </td>

                            <td>
                                <a :href="'/music_platform/download?id='+song.mid" class="song-info">
                                    <i class="fas fa-download"></i>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="box-tools pull-right">
                <ul class="pagination">
                    <li>
                        <a @click.prevent="loadPage(cClass,pageInfo.navigateFirstPage)" aria-label="Previous">首页</a>
                    </li>
                    <li><a @click.prevent="loadPage(cClass,pageInfo.pageNum-1)">上一页</a></li>
                    <li v-for="index in pageInfo.pages" :class="{active: pageInfo.pageNum == index}">
                        <a @click.prevent="loadPage(index)">{{index}}</a>
                    </li>
                    <li><a @click.prevent="loadPage(cClass,pageInfo.pageNum+1)">下一页</a></li>
                    <li>
                        <a @click.prevent="loadPage(cClass,pageInfo.navigateLastPage)" aria-label="Next">尾页</a>
                    </li>
                </ul>
            </div>

            <div class="content">
                <div class="con-top">
                    <h3>评论</h3>
                    <span>共210059条评论</span>
                </div>

                <div class="con-send">
                    <div><img src="logo/user.jpg" alt=""></div>
                    <div>
                        <textarea name="text" placeholder="评论" cols="30" rows="10"></textarea>
                    </div>

                    <div>
                        <a href="javascript:void(0);"></a>
                        <a href="javascript:void(0);"></a>
                        <a href="javascript:void(0);">评论</a>
                        <span>140</span>
                    </div>
                </div>

                <div class="con-jc">精彩评论</div>

                <div class="con-body">
                    <div>
                        <div><img src="rank-imgs/con01.jpg" alt=""></div>
                        <div>
                            <a href="#">-_-老鱼</a>
                            ：许巍有《蓝莲花》高梨康治有《红莲》翁大涵有《白莲》马琪龙有《青莲》，
                            最近又火了一个啥榴莲，我孙某人只有不要b莲
                        </div>
                        <div>
                            <span>2020年11月26日</span>
                            <a href="javascript:void(0);"></a>
                            <a href="javascript:void(0);">(3040)</a>
                            <i></i>
                            <a href="javascript:void(0);">回复</a>
                        </div>
                    </div>

                    <div>
                        <div><img src="rank-imgs/con02.jpg" alt=""></div>
                        <div>
                            <a href="#">爱椿的湫_</a>
                            ：毋庸置疑。天份1551%，承蒙关照
                        </div>
                        <div>
                            <span>2020年11月26日</span>
                            <a href="javascript:void(0);"></a>
                            <a href="javascript:void(0);">(2778)</a>
                            <i></i>
                            <a href="javascript:void(0);">回复</a>
                        </div>
                    </div>

                    <div>
                        <div><img src="rank-imgs/con03.jpg" alt=""></div>
                        <div>
                            <a href="#">夜夜太平长安</a>
                            ：《大千世界》如果你听懂了，一定会为它鼓掌，一定会为它爸爸鼓掌
                        </div>
                        <div>
                            <span>2020年11月26日</span>
                            <a href="javascript:void(0);"></a>
                            <a href="javascript:void(0);">(2626)</a>
                            <i></i>
                            <a href="javascript:void(0);">回复</a>
                        </div>
                    </div>

                    <div>
                        <div><img src="rank-imgs/con04.jpg" alt=""></div>
                        <div>
                            <a href="#">青春额童话</a>
                            ：1599%，2019年最高飙升，薛之谦！
                        </div>
                        <div>
                            <span>2020年11月26日</span>
                            <a href="javascript:void(0);"></a>
                            <a href="javascript:void(0);">(2057)</a>
                            <i></i>
                            <a href="javascript:void(0);">回复</a>
                        </div>
                    </div>

                    <div>
                        <div><img src="rank-imgs/con05.jpg" alt=""></div>
                        <div>
                            <a href="#">云村专业钓鱼</a>
                            ：上线仅12个小时，不是网易首发，没有任何推荐，全靠歌迷口口相传，飙升584%，可以了。
                        </div>
                        <div>
                            <span>2020年11月26日</span>
                            <a href="javascript:void(0);"></a>
                            <a href="javascript:void(0);">(1771)</a>
                            <i></i>
                            <a href="javascript:void(0);">回复</a>
                        </div>
                    </div>

                    <div>
                        <div><img src="rank-imgs/con06.jpg" alt=""></div>
                        <div>
                            <a href="#">一久久揪</a>
                            ：恭喜《天外来物》以1482%的飙升率空降榜一
                        </div>
                        <div>
                            <span>2020年11月26日</span>
                            <a href="javascript:void(0);"></a>
                            <a href="javascript:void(0);">(1732)</a>
                            <i></i>
                            <a href="javascript:void(0);">回复</a>
                        </div>
                    </div>

                    <div>
                        <div><img src="rank-imgs/con07.jpg" alt=""></div>
                        <div>
                            <a href="#">夜夜太平长安</a>
                            ：《老古董》不是网易首发也不是独家 飙了1298% 《大千世界》网易独家首发
                            才飙了1316% 估计和MV出的早有关系 大家都直接看MV去了
                        </div>
                        <div>
                            <span>2020年11月26日</span>
                            <a href="javascript:void(0);"></a>
                            <a href="javascript:void(0);">(1707)</a>
                            <i></i>
                            <a href="javascript:void(0);">回复</a>
                        </div>
                    </div>

                    <div>
                        <div><img src="rank-imgs/con08.jpg" alt=""></div>
                        <div>
                            <a href="#">过眼星点</a>
                            ：为大千世界继续打榜，也推荐大千世界的mv。这首歌的内涵和思辩需要自己去发现才是最好的，
                            mv打榜四步骤点赞收藏评论分享！
                        </div>
                        <div>
                            <span>2020年11月26日</span>
                            <a href="javascript:void(0);"></a>
                            <a href="javascript:void(0);">(1621)</a>
                            <i></i>
                            <a href="javascript:void(0);">回复</a>
                        </div>
                    </div>

                    <div>
                        <div><img src="rank-imgs/con09.jpg" alt=""></div>
                        <div>
                            <a href="#">沉默低调做人</a>
                            ：飙升榜最高纪录被一次又一次刷新.【火星人来过】1059％ 【高尚】1592％ 【动物世界】1709％
                            【暧昧】1798％让我们一起期待薛之谦的下一首新歌
                        </div>
                        <div>
                            <span>2020年11月26日</span>
                            <a href="javascript:void(0);"></a>
                            <a href="javascript:void(0);">(1501)</a>
                            <i></i>
                            <a href="javascript:void(0);">回复</a>
                        </div>
                    </div>

                    <div>
                        <div><img src="rank-imgs/con10.jpg" alt=""></div>
                        <div>
                            <a href="#">青丝20184</a>
                            ：第一第二都很好啊！绝代真的很好听，词曲都很许嵩！作为嵩哥十年的老粉，也非常支持福西西，
                            他是很不错的新人！未来可期！
                        </div>
                        <div>
                            <span>2020年11月26日</span>
                            <a href="javascript:void(0);"></a>
                            <a href="javascript:void(0);">(1422)</a>
                            <i></i>
                            <a href="javascript:void(0);">回复</a>
                        </div>
                    </div>

                </div>

            </div>

            <div class="pages">
                <a class="pre" href="javascript:void(0);">上一页</a>
                <a class="curr" href="javascript:void(0);">1</a>
                <a href="javascript:void(0);">2</a>
                <a href="javascript:void(0);">3</a>
                <a href="javascript:void(0);">4</a>
                <a href="javascript:void(0);">5</a>
                <a href="javascript:void(0);">6</a>
                <a href="javascript:void(0);">7</a>
                <a href="javascript:void(0);">8</a>
                <a href="javascript:void(0);">9</a>
                <i>...</i>
                <a href="javascript:void(0);">10503</a>
                <a class="next" href="javascript:void(0);">下一页</a>
            </div>

            <div class="apl">
                <aplayer autoplay
                         :music="{
                title: this.audio.name,
                artist: this.audio.artist,
                src: this.audio.url,
                pic: this.audio.cover,
                lrc: this.audio.lyc
            }" :float="true" :showLrc="true" :mutex="true" :listMaxHeight="'300px'":listFolded="false"
                />
            </div>

        </div>

    </div>
</div>

<script>
    var rank_r_ele = document.getElementsByClassName('rank-right')[0];
    var rank_l_ele = document.getElementsByClassName('rank-left')[0];
    rank_l_ele.style.height = rank_r_ele.clientHeight + 'px';

    var a_eles = document.getElementsByClassName('rtr3')[0];
    a_eles.children[0].addEventListener('mouseenter', function () {
        this.children[0].style.backgroundPosition = '0 -469px';
        this.children[0].children[0].style.backgroundPosition = '-28px -1622px';
    });

    a_eles.children[0].addEventListener('mouseleave', function () {
        this.children[0].style.backgroundPosition = '0 -387px';
        this.children[0].children[0].style.backgroundPosition = '0 -1622px';
    });

    var tr_eles = document.querySelectorAll('tbody>tr');
    for (i = 0; i < tr_eles.length; i++) {
        tr_eles[i].addEventListener('mouseenter', function () {
            this.children[2].children[0].style.display = 'none';
            this.children[2].children[1].style.display = 'block';
        });

        tr_eles[i].addEventListener('mouseleave', function () {
            this.children[2].children[0].style.display = 'block';
            this.children[2].children[1].style.display = 'none';
        });
    }

    var page_eles = document.getElementsByClassName('pages')[0];
    page_a_eles = page_eles.children;
    for (i = 1; i < page_a_eles.length - 1; i++) {
        page_a_eles[i].onclick = function () {
            var curr_a_ele = document.getElementsByClassName('curr')[0];
            curr_a_ele.className = '';
            this.className = 'curr';
        }
    }

</script>
<script src="js/vue.js"></script>
<!-- 引入 Vue-APlayer -->
<script src="js/vue-aplayer.min.js"></script>
<script src="js/axios.js"></script>
<script src="js/getParameter.js"></script>
<script>
    new Vue({
        el:"#rank",
        data:{
            pageInfo:{},
            cClass:1,
            n:"飙升榜",
            audio: {
                name:'无歌曲',
                artist: '无歌曲',
                url: '',
                cover: '/music_platform/img/R-C.png',
                lyc:''
            },
        },
        methods:{
            async playSong(mid){
                let _this = this;
                await axios.get("/music_platform/singleSong/"+mid).then(function (response){
                    _this.audio.name = response.data.data.mname;
                    _this.audio.artist = response.data.data.singer.sname;
                    _this.audio.cover = "/music_platform"+response.data.data.pic;
                    _this.audio.lyc = response.data.data.lyc;
                    _this.audio.url = "/music_platform"+response.data.data.source;
                })
            },
            loadSoaringPageInfo(pageNum) {
                const _this = this;
                axios.get("/music_platform/singleSong/soaring?pageNum="+pageNum).then(function (response) {
                    _this.pageInfo = response.data
                })
            },
            loadNewPageInfo(pageNum) {
                const _this = this;
                axios.get("/music_platform/singleSong/new?pageNum="+pageNum).then(function (response) {
                    _this.pageInfo = response.data
                })
            },
            loadHotPageInfo(pageNum) {
                const _this = this;
                axios.get("/music_platform/singleSong/hot?pageNum="+pageNum).then(function (response) {
                    _this.pageInfo = response.data
                })
            },
            changeClass(i){
                this.cClass = i;
                if (i===1){
                    this.loadSoaringPageInfo(1);
                    this.n = "飙升榜";
                }else if (i===2){
                    this.loadNewPageInfo(1);
                    this.n = "新歌榜";
                }else if (i===4){
                    this.loadHotPageInfo(1);
                    this.n = "热歌榜";
                }
            },
            loadPage(cClass,pageNum){
                if (cClass===1){
                    this.loadSoaringPageInfo(pageNum);
                }else if (cClass===2){
                    this.loadNewPageInfo(pageNum);
                }else if (cClass===4){
                    this.loadHotPageInfo(pageNum);
                }
            },
        },
        created:function () {
            this.loadSoaringPageInfo(1);
        },
        components: {
            Aplayer: window.VueAPlayer  // 注册Vue-APlayer组件
        }
    })
</script>